
*{margin:0;padding:0;color:#000;box-sizing: unset;}
ul,dl,ol{list-style: none;width:100%;height:100%;margin-bottom:0;}
h1,h2,h3,h4,h5{color:#00ffff !important;margin-top:0 !important;margin-bottom:0;line-height:200%;}
a{text-decoration: none;}
p{margin-bottom:0;}
.clear:after{content:"200B";font-size:0;height:0;clear:both;display: block}
body{background: -webkit-linear-gradient(60deg, #0a4d7e, #02325e);background: -o-linear-gradient(60deg, #0a4d7e, #02325e);background: -moz-linear-gradient(60deg, #0a4d7e, #02325e);background: linear-gradient(60deg, #0a4d7e, #02325e);width: 100vw;height: 100vh;}
*{margin: 0}

.ui-view-box{
  position: fixed;
  top: 13.1%;
  left: 9.5%;
  width: 90.5%;
  height: 82.5%;
  background-color: #fff;
}
.clear{
  clear:both;
}

$color:#fff;
$popUpsWidthAll:90.5vw;
$cursor:pointer;
$background-color:rgba(255,255,255,0.05);
$width:9.5%;
$topHeight:9.7vh;
$footHeight:3.8vh;
$menuHeight:90.3vh;
$liHeight:3.5vh;
$listTableWidth:100%-$width;
$menuMargin-right:1.38vh;
$menuIconHeight:1.9vh;
$menuIconMargin-top:0.8vh;
$menuTextMargin-left:4.5vh;
$fontSize:1.4rem;
$footImgHeight:1.9vh;
$footImgMargin-top:0.8vh;
$headerMargin-right:1.7%;
$footCenterTextMargin-left:35vw;
$footCenterEmergencyLeft:30vw;
$popUpsMargin-top:10.7vh;
$popUpsMargin-left:9.5vw;
$popUpsWidthAll:90.5vw;
$popupWidth:0.966;
$listHeight:89.3vh;
$listTitleHeight:6.3vh;
$toolMargin-top:4.8vh;
$listMargin-top:10.6vh;
$popUpsLiMargin-left:5%;
$popUpsLiHeight:3.8vh;
$popUpsLiWidth:10vw;
$popUpsButtonHeight:3vh;
$popUpsButtonWidth:9.5vh;
$popUpsButtonBackground-color:#497ea2;
$popUpsButtonHoverBackground-color:#639dc5;
$color:#FFF;
$mainTableTitleHeight:3vh;
$mainTableListHeight:2.6vh;
$footHeight:3.8vh;
$popUpsMargin-top:9.7vh;
$popUpsMargin-left:9.5vw;
$popUpsWidthAll:90.5vw;
$popupWidth:0.966;
$listHeight:90.3vh;
$listTitleHeight:6.3vh;
$toolMargin-top:4.8vh;
$listMargin-top:10.6vh;
$popUpsLiMargin-left:5%;
$popUpsLiHeight:3.8vh;
$popUpsLiWidth:10vw;
$popUpsButtonHeight:3vh;
$popUpsButtonWidth:9.5vh;
$popUpsButtonBackground-color:#497ea2;
$popUpsButtonHoverBackground-color:#639dc5;
$color:#FFF;
$mainTableTitleHeight:3vh;
$mainTableListHeight:2.6vh;
$footHeight:3.8vh;
html{
  font-size: 10px;
}
.settings{
  height: $topHeight;
  margin-left: $width;
  position: fixed;
  top: 0;
  width:$listTableWidth ;
  .settings-main{
    right: $headerMargin-right;
    position: absolute;
    width: 100%;
    margin: 0;
    .text{
      font-size: 1.6rem;
      line-height: $topHeight;
      color: #fff;
      margin: 0 $liHeight*0.3;
      cursor: $cursor;
    }
    li{
      float: right;
    }
  }
}
.head-title{
  position: fixed;
  top: $liHeight*0.3;
  left: $menuMargin-right;
  width: auto;
  p:nth-child(1){
    font-size: 2.2rem;
    color: $color;
    margin: 0;
  }
  p:nth-child(2){
    font-size: 1.4rem;
    color: $color
  }
}
.system{
  width: $width;
  position: fixed;
  height: $menuHeight;
  top: $topHeight;
  overflow: hidden;
  /*.first-level{
    overflow: auto;
    height:$menuHeight;
    -webkit-margin-start: 0;
    -webkit-margin-before: 0;
    margin: 0;
    -webkit-padding-start: 0;
    -webkit-margin-after: 0;
    li{
      width: 100%;
      line-height: $liHeight;
      height: $liHeight;
      color: #fff;
      cursor: $cursor;
      transition: all 100ms;
      -webkit-transition:all 100ms;
      margin-bottom: 0.5vh;
      .first-style{
        width: 100%;
        height: $liHeight;
        position: relative;
        background-color: $background-color;
        opacity: 0.5;
        img{
          right: $menuMargin-right;
          position: absolute
        }
        .first-text{
          position: absolute;
          top: 0;
          padding-left:$menuTextMargin-left;
          height:$liHeight;
          font-size: 1.4rem;
          color: $color;
          opacity: 0.5 !important;
        }
      }
      &:hover{
        .first-style{
          width: 100%;
          opacity: 1;
        }
      }
      }

      .rect{
        float: left;
        margin-top: $menuIconMargin-top;
        position: absolute;
        left: $menuMargin-right;
        width: $menuIconHeight;
        height: $menuIconHeight;
      }

    }
    .second-level{
      -webkit-margin-start: 0;
      -webkit-margin-before: 0;
      margin: 0;
      -webkit-padding-start: 0;
      -webkit-margin-after: 0;
      li{
        margin-bottom: 0;
        .second-style{
          position: relative;
          .second-text{
            padding-left: $menuTextMargin-left;
            font-size: 1.2rem;
            color: $color;
            opacity: 0.5;
            height: $liHeight;
          }
          .second-menu-icon{
            width: 0.56vh;
            height: 1.1vh;
            right: $menuMargin-right;
            position: absolute;
            margin-top: -2.4vh;
            top: 0;
          }
          &:hover{
            .second-text{
              width: 100%;
              opacity: 1;
            }
          }
        }
        .third-level{
          -webkit-margin-start: 0;
          -webkit-margin-before: 0;
          margin: 0;
          -webkit-padding-start: 0;
          -webkit-margin-after: 0;
          li{
            .third-style{
             position: relative;
              .third-text{
                padding-left: $menuTextMargin-left;
                color: $color;
                opacity: 0.5;
              }
              img{
                left:2.72vh;
                position: absolute;
                top: 0;
                width: 0.56vh;
                height: 1.1vh;
                margin-top: 1.2vh;
              }
            }
          }
        }
      }
    }*/
  }
.change-menu{
 opacity: 1 !important;
}
.footer{
  height: $footHeight;
  left: $width;
  width: $listTableWidth;
  position: fixed;
  bottom: 0;
  margin-left: 0;
  overflow: hidden;
  img{
    width: $footImgHeight*3.1;
    height: $footImgHeight;
    margin-top: $footImgMargin-top;
    position: absolute;
    top: 0;
    left: 0;
    margin-left: 0;
  }
  .text{
    position: absolute;
    margin-left: $footImgHeight*4.5;
    margin-top:$footImgMargin-top;
    color: $color;
    line-height: 0.8rem;
    font-size: 1rem;
    width: 20vw;
    &:nth-child(2){
      line-height: 0.8rem;
      margin-top: $footHeight*2/3;
    }
  }
  .right-text{
    position: absolute;
    right:$headerMargin-right ;
    line-height:$footHeight ;
    color: $color;
    top: 0;
  }
  .event{
    width: 100%;
    overflow: hidden;
    position: absolute;
    li{
      line-height:$footHeight ;
      margin-left: $footCenterTextMargin-left;
      color: $color;
    }
  }
  .emergency{
    color: red;
    line-height:$footHeight ;
    position: absolute;
    left: $footCenterEmergencyLeft;
  }
}
.menu-title{
  background-color: #d2d2d2;
  width: $listTableWidth;
  height: 3.5vh;
  position: fixed;
  left:$width ;
  top: $topHeight;
  z-index: 300;
  .title{
    margin-left: 1.7%;
    margin-bottom: 0;
    li{
      float: left;
      width: auto;
      line-height: 3.5vh;
      margin-right: 0.5vh;
    }
  }
}




